<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title></title>
    <style>
      .head {
        color: aqua;
      }

      .red {
        color: palevioletred;
      }

      .blue {
        color: blue;
      }

      .size {
        font-size: 30px;
      }

      .active {
        color: violet;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 静态页面写法 -->
      <h1 class="head" style="background-color: rgb(7, 176, 119)">
        许老祖真帅
      </h1>

      <!-- 动态 class: 字符串形式, 字符串的值是什么，类名就是什么 -->
      <p :class="'red'">清漪真漂亮</p>
      <p :class="color">清漪真漂亮</p>
      <button @click="handClick">按钮</button>

      <!-- 动态 class: 对象形式，对象属性值为true，该属性就保留为类名，为false就不保留 -->
      <p
        :class="{
        size:true,
        red:true,
        blue:false,
 
      }"
      >
        清漪真漂亮
      </p>
      <!-- 动态 class: 对象形式，对象属性值为true，该属性就保留为类名，为false就不保留 -->
      <p
        :class="{
        size:true,
        red:color === 'red',
        blue:color === 'blue',
      }"
      >
        清漪真漂亮
      </p>
      <button @click="changeClick">点击变换颜色</button>

      <!-- 动态: class 数组形式 -->

      <p
        :class="color"
      >
        清漪真漂亮
      </p>

      <p
        :class="[
            'size',
            color
        ]"
      >
        清漪真漂亮
      </p>
      <button @click="changeClick">点击变换颜色</button>

      <ul>
        <li :class="{ active: isChenActive}" @click="setActive('Chen')">课程</li>
        <li :class="{ active: isSeedActive}" @click="setActive('Seed')">直播</li>
        <li :class="{ active: isLiveActive}" @click="setActive('Live')">活动</li>
      </ul>
    </div>

    <script src="./js/vue.js"></script>

    <script>
      const vm = new Vue({
        data: {
          color: "red",
          isChenActive: false,
          isSeedActive: false,
          isLiveActive: false,
        },
        //方法
        methods: {
          changeClick() {
            // 如果当前的颜色是red 就让他的值变成blue 否则还是原来的red
            this.color = this.color === "red" ? "blue" : "red";
          },

          setActive(flag) {
            this.isChenActive = false;
            this.isSeedActive = false;
            this.isLiveActive = false;

            this[`is${flag}Active`] = true;
          },
        },
      });

      vm.$mount("#app");
    </script>
  </body>
</html>
